<template>
  <view class="list-view">
    <view class="offset">
      <view class="item" v-for="(item, index) in list" :key="index" @click="clickItem(item, index)">
        <view class="pic">
          <image :src="item.pic"></image>
        </view>
        <view class="text-wrap">
          <view class="top-wrap">
            <text>{{item.name}}</text>
          </view>
          <view class="bottom-wrap">
            <text class="price"><text>¥</text>{{item.price}}</text>
            <text class="comment">
              <text class="label">自营</text>
              5000+条评价 好评率96%
            </text>
            <text class="store">蕉下京东自营旗舰店</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            name: '蕉下围巾女围巾男圣诞生日礼物女围脖伴手礼围脖女秋冬披肩自发热热敷保暖-裸烟粉',
            pic: '/static/product/product_10.jpg',
            price: '249.00'
          },{
            name: '蕉下围巾女圣诞生日礼物女围脖伴手礼围脖女秋冬披肩入冬礼物围巾帽子一体加厚毛绒趣萌-蓝灰猫',
            pic: '/static/product/product_11.jpg',
            price: '199.00'
          },{
            name: '蕉下口罩防晒保暖口罩立体黑色面罩3d口罩创意棉口罩防寒网红防尘口罩3层防护防风保暖蓄热-均码-漆夜黑',
            pic: '/static/product/product_12.jpg',
            price: '249.00'
          },{
            name: '蕉下围巾女围巾男圣诞生日礼物女围脖伴手礼围脖女秋冬披肩自发热热敷保暖-裸烟粉',
            pic: '/static/product/product_13.jpg',
            price: '59.00'
          },
        ]
      }
    },
    methods: {
      clickItem(item, index) {
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list-view {
    width: 100%;
    overflow: hidden;
    
    .offset {
      width: calc(100% + 20upx);
      display: flex;
      flex-wrap: wrap;
      
      .item {
        width: calc(50% - 20upx);
        margin: 0 20upx 20upx 0;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10upx;
        overflow: hidden;
        
        .pic {
          width: 341upx;
          height: 341upx;
          overflow: hidden;
          
          image {
            width: 100%;
            height: 100%;
          }
        }
        
        .text-wrap {
          padding: 10upx 10upx 10upx 10upx;
          box-sizing: border-box;
          
          .top-wrap {
            
            text {
              color: #333;
              font-size: 26upx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
          
          .bottom-wrap {
            margin-top: 15upx;
            
            .label {
              color: #fff;
              font-size: 20upx;
              border-radius: 5upx;
              line-height: 1;
              display: inline-block;
              padding: 4upx 2upx;
              background-color: #E93B3D;
            }
            
            .price {
              display: block;
              color: red;
              font-size: 32upx;
              font-weight: 500;
              line-height: 1;
              
              text {
                font-size: 20upx;
              }
            }
            
            .comment {
              display: block;
              margin-top: 10upx;
              color: #999;
              font-size: 24upx;
              
              text {
                display: inline-block;
                padding: 4upx;
                background-color: red;
                color: #fff;
                font-size: 20upx;
                line-height: 1;
                border-radius: 4upx;
                margin-right: 10upx;
                position: relative;
                top: -4upx;
              }
            }
            
            .store {
              display: block;
              margin-top: 10upx;
              color: #999;
              font-size: 24upx;
            }
          }
        }
      }
    }
  }
</style>
